<template>
  <div class="beijing">
    <!--<h2>请选择你的身份</h2>-->
    <button
      @click="denglu()"
      style="
        font-size: 23px;
        border-style: none;
        background: rgba(0, 0, 0, 0);
        margin-right: 80px;
      "
    ></button>
    <!--<router-link :to="{ name: 'TanPage' }" style="font-size: 23px;">
      我是游客
    </router-link>-->
    <!--<div class="upload-image">
      <el-dialog title="欢迎登录碳排放系统" :visible.sync="loginForm" width="450px" height="270px">-->
    <div class="box-card">
      <el-card class="form_container">
        <template #header>
          <div class="card-title">欢迎登录北京林业大学碳排放核算与管理系统</div>
        </template>
        <el-form ref="user" :model="user" :rules="rules">
          <el-form-item prop="username" style="margin-bottom: 5%">
            <el-input
              v-model="user.username"
              placeholder="用户名"
              type="text"
            />
          </el-form-item>
          <el-form-item prop="password" style="margin-bottom: 5%">
            <el-input
              v-model="user.password"
              placeholder="密码"
              type="password"
              @keyup.enter.native="onSubmit('user')"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="button-long"
              type="primary"
              @click="onSubmit(user)"
              :loading="loading"
              round
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { login } from "../api/user";
import background from "../pic/background.png";

//消息订阅与发布
import pubsub from "pubsub-js";

export default {
  name: "Login",
  data() {
    return {
      loginForm: false,
      user: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loading: false,
    };
  },
  //父子组件传值
  // props:{
  //   loginForm: {
  //     type: Boolean,
  //     required: true
  //   }
  // },

  created() {
    //1.利用localStorage
    // if (localStorage.getItem("loginForm") != null) {
    //    this.loginForm = Boolean(localStorage.getItem('loginForm'));
    //    localStorage.removeItem('loginForm')
    // }
    //2.利用路由携参
    // console.log("this:",this)
    // console.log("2.this.loginForm:",this.loginForm)
    // console.log("this.$route.query.loginForm:",this.$route.query.loginForm)
    // console.log("this.$route.params.loginForm:",this.$route.params.loginForm)
    // this.loginForm = this.$route.params.loginForm

    //3.利用全局总线
    // this.$bus.$on('sendLoginForm',(data)=>{
    //   this.loginForm = data
    // })

    //4.利用消息订阅与发布

    // this.pubId = pubsub.subscribe('sendLoginForm',(msgName,data)=>{
    //   console.log("成功收到消息:",msgName)
    //   this.loginForm = data
    // })

    CSSLayerBlockRule;
    // 按 Enter 键登录系统
    document.onkeydown = (e) => {
      e = window.event || e;

      let that = this;
      if (this.$route.path === "/Tan/TanLogin" && e.keyCode === 13) {
        console.log(this.$route.path);
        this.onSubmit({
          username: this.user.username,
          password: this.user.password,
        }); // submitLoginForm() 为登录函数
      }
    };
  },
  beforeDestroy() {
    //3.利用全局总线
    // this.$bus.$off('sendLoginForm')

    //4.利用消息订阅与发布
    pubsub.unsubscribe(this.pubId);
  },
  methods: {
    denglu() {
      this.loginForm = true;
    },
    onSubmit(user) {
      login(user)
        .then((res) => {
          console.log("res", res);
          this.loading = true;
          if (res.data.code == 200) {
            let type = res.data.data.type;
            localStorage.setItem("id", res.data.data.id);
            console.log("id", res.data.data.id);
            console.log("....");
            console.log(res.data.data.name);
            console.log(res.data.data.token);
            localStorage.setItem("token", res.data.data.token);
            this.$message({
              message: "您好！" + res.data.data.name + ", 欢迎登录系统",
              type: "success",
            });
            console.log(res.data.data.name);
            console.log(res.data.data.token);

            //保留登录角色(admin)
            localStorage.setItem("auth", "admin");
            //跳转到上一次被拦截的页面
            console.log(
              "this.$route.query.curRoute:",
              this.$route.query.curRoute
            );
            if (this.$route.params.curRoute == null) {
              this.$router.push({ path: "/Tan/TanPage" });
            } else {
              this.$router.push({ path: this.$route.params.curRoute });
            }

            //3.触发全局总线方法
            this.$bus.$emit("updateLoginStatus", "admin");
          } else {
            console.log(res.data.code);
            console.log(res.data.message);
            this.$message({
              message: res.data.message,
            });
            this.loading = false;
          }
        })
        .catch(() => {})
        .finally(() => {});
    },
  },
};
</script>

<style lang="css" scoped>
div {
  margin: 0;
  padding: 0;
}

.beijing {
  /* position: absolute; */
  width: 100%;
  height: 100%;

  background: url(../assets/bg.jpg);
  background-size: 100% 100%;
}

.form_container {
  /*max-width: 460px;*/
  /*!*margin: 10vh auto;*!*/
  /*margin: 0;*/

  height: 265px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 430px;
  border-radius: 5px;
  padding: 45px;
  text-align: center;
}
</style>
